<?php
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/jquery-ui-1.8.11.custom.min.js",CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/jquery.tipsy.js",CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/jquery.wysiwyg.js",CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/jquery.uniform.min.js",CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/art-dialog/jquery.artDialog.js",CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile($this->adminPath."/js/art-dialog/plugins/iframeTools.js",CClientScript::POS_HEAD);

?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->adminPath; ?>/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->adminPath; ?>/js/art-dialog/skins/blue.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fAXvQNHCaKmYx1mnmblyNBDz"></script>
<style>
    #toolbar{ background-color:#E5ECF9;zoom:1; height:24px; line-height:24px; padding:0 12px; margin-top:3px; position:relative}
    #toolbar a{display:inline-block;zoom:1;*display:inline; color:#4673CC}
    #toolbar a.mark,#toolbar a.map{ background: url(<?php echo $this->adminPath; ?>/img/map/map_mark.png) no-repeat left 50%; padding:0 0 0 20px}
    #toolbar a.map{ background-image:url(<?php echo $this->adminPath; ?>/img/map/map.png); margin-left:12px}
    #toolbar .right{ float:right;}
    #toolbar .CityBox{position:absolute; left:40px; top:30px; background-color:#fff; border:1px solid #8BA4D8; padding:2px; z-index:1; width:200px; display:none}
    #toolbar .CityBox h4{background-color:#E5ECF9; line-height:20px; height:20px; padding:0 6px; color:#6688CC; position:relative}
    #toolbar .CityBox h4 div.top{background: url(<?php echo $this->adminPath; ?>/img/map/topo.png) no-repeat; height:6px; width:11px; position:absolute; top:-9px; left:38px; line-height:normal; font-size:0}
    #toolbar .CityBox .content{ padding:6px; height:150px;overflow-y:auto; padding-bottom:8px}
    #toolbar .CityBox a.close{background: url(<?php echo $this->adminPath; ?>/img/map/cross.png) no-repeat left 3px; display:block; width:16px; height:16px;position: absolute;outline:none;right:3px; bottom:1px}
    #toolbar .CityBox a.close:hover{background-position: left -46px}
    #toolbar .CityBox .line{ height:6px; border-bottom:1px solid #EBEBEB; margin-bottom:5px;}
    #mapObj{width:100%;height:340px; padding-top:1px}
</style>


    <div class="st-form-line" style="z-index: 580;">
        <span class="st-labeltext">地图标注</span>
        <div class="clear" style="z-index: 570;"></div>
    </div>




<div id="toolbar">
    <div class="selCity">
        <div class="right"><a href="javascript:;" class="mark" onClick="addMarker();">添加标注</a><a href="javascript:;" onClick="removeMarker();" class="map">重置地图</a></div>
        <strong id="curCity">洛阳</strong> [<a onClick="mapClose();" id="curCityText" href="javascript:;">更换城市</a>]
    </div>
    <div class="CityBox">
        <h4>城市列表<div class="top"></div><a href="javascript:;" class="close" onClick="mapClose();"></a></h4>
        <div class="content">
            <p>
                <a href="javascript:;" onClick="keywordSearch('')"></a>
            </p>
            <div class="line"></div>
            <input type="text" value="输入城市名" style=" width:140px; height:18px" name="citywd" id="citywd" onclick="$(this).val('');">
            <input type="submit" value="确定" class="city_submit" onClick="keywordSearch()">
        </div>
    </div>
</div>
<div id="mapObj" class="view"></div>


<div class="st-form-line button-box" style="z-index: 460;">
    <input type="hidden" id="map" value="">
    <input type="button" class="st-button" value="保存" id="submit" name="button">
</div>


<script type="text/javascript">
    var mapObj = new BMap.Map("mapObj");          // 创建地图实例
    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    mapObj.addControl(ctrl_nav);
    mapObj.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    mapObj.enableScrollWheelZoom();//启用地图滚轮放大缩小
    mapObj.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    mapObj.enableKeyboard();//启用键盘上下左右键移动地图
    var coordinate = art.dialog.data('coordinate');//是否设置了地图的坐标?
    var city = art.dialog.data('city_address');//获取的城市地址
    if(coordinate) {
        $("#map").val(coordinate);
        drawPoints();
    } else {
        mapObj.centerAndZoom(city);
    }
    //设置切换城市
    function keywordSearch(city) {
        if(city==null || city=='') {
            var city = $("#citywd").val();
        }
        mapObj.setCenter(city);
        $("#curCity").html(city);
    }

    function drawPoints(){
        var data = null;
        data = coordinate;
        var data = data.split('|');
        var lngX = data[0];
        var latY = data[1];
        var zoom = data[2] ? data[2] : 10;
        mapObj.centerAndZoom(new BMap.Point(lngX,latY),zoom);
        // 创建图标对象
        var myIcon = new BMap.Icon('<?php echo $this->adminPath; ?>/img/map/mak.png', new BMap.Size(27, 45));

        // 创建标注对象并添加到地图
        var center = mapObj.getCenter();
        var point = new BMap.Point(lngX,latY);
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.enableDragging();
        mapObj.addOverlay(marker);
        marker.addEventListener("dragend", function(e){
            var ZoomLevel = mapObj.getZoom();
            $('#map').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel);
        })
    }

    function addMarker(){
        mapObj.clearOverlays();
        // 创建图标对象
        var myIcon = new BMap.Icon('<?php echo $this->adminPath; ?>/img/map/mak.png', new BMap.Size(27, 45));

        // 创建标注对象并添加到地图
        var center = mapObj.getCenter();
        var point = new BMap.Point(center.lng,center.lat);
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.enableDragging();
        mapObj.addOverlay(marker);
        marker.addEventListener("dragend", function(e){
            var ZoomLevel = mapObj.getZoom();
            $('#map').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel);
        })
    }
    function mapClose(){
        var CityBox=$(".CityBox");
        if(CityBox.css('display')=='none'){
            CityBox.show();
        }else{
            CityBox.hide();
        }
    }
    function removeMarker() {
        mapObj.clearOverlays();
        mapObj.centerAndZoom("洛阳");
        $("#curCity").html('洛阳');
        $("#map").val('');
    }
    $(function(){
        $("#submit").click(function(){
            var map = $("#map").val();
            if(map == ''){
                art.dialog({
                    content: '您没有选择坐标',
                    icon: 'error'
                }).time(1);
                return false;
            }
            art.dialog.data('maps',map);
            art.dialog.close();
        });
    });
</script>